var RepairTimeItem = function () {
  var template = /* html */ `
    <div class="repair-time-item" :class="{'has-repair':repair!==null}">
      <template v-if="repair!==null">
        <div class="repair-item-title">{{repair.month}}月设备维修</div>
        <div ref="chart" class="repair-item-chart"></div>
      </template>
    </div>
  `;

  return {
    props: {
      repair: {
        type: Object,
        required: true
      },
      isShow: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      changeData: function (newVal, oldVal) {
        if (newVal.nameList.length < oldVal.nameList.length) {
          this.showChart();
          return;
        }
        this.resetChart();
      }
    },

    computed: {
      changeData: function () {
        var repair = this.repair;
        return {
          isShow: this.isShow,
          nameList: repair ? repair.nameList : []
        }
      }
    },

    data: function () {
      return {};
    },

    mounted: function () {
      if (this.isShow) {
        this.showChart();
      }

      var self = this;
      $(this.$el).resize(function () {
        if (self.repair === null) {
          return;
        }

        var chartDom = self.$refs['chart'];
        if (chartDom === undefined) {
          return;
        }
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods: {
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        var repair = this.repair;
        if (repair === null) {
          return;
        }

        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      resetChart: function () {
        if (!this.isShow || this.repair === null) {
          return;
        }

        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var chartOption = {};
        this.resetChartOption(chartOption);
        chart.setOption(chartOption);
      },

      getChartOption: function () {
        var nameList = this.repair.nameList;

        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 30,
            left: 50,
            bottom: 30,
            top: 45
          },
          legend: {
            type: 'scroll',
            top: 0,
            textStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 16
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0,
              formatter: function (value) {
                var label = i18n.getMsg(`remoteBoard.repairTime.field.${value}`);
                return label;
              }
            }
          }],
          yAxis: [{
            min: 0,
            max: 5,
            name: '时间(小时)',
            nameGap: 8,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var name = params[0].name;
              var nameStr = i18n.getMsg(`remoteBoard.repairTime.field.${name}`);
              var textList = [nameStr];

              var data = params[0].data;
              var repairParams = [];
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var seriesName = param.seriesName;
                var index = nameList.indexOf(seriesName);
                var value = data[index + 1];
                repairParams.push({
                  marker: param.marker,
                  name: seriesName,
                  value: value
                });
              }

              var sortType;
              if (name === 'maxTime') {
                sortType = 'desc';
              } else {
                sortType = 'asc';
              }

              repairParams = _.orderBy(repairParams, ['value'], [sortType]);
              for (var i = 0; i < repairParams.length; i++) {
                var param = repairParams[i];
                textList.push(`${param.marker} ${param.name}:${param.value}小时`);
              }
              return textList.join('<br>');
            }
          },
          dataset: {
            source: []
          },
          series: []
        };
        return chartOption;
      },

      resetChartOption: function (chartOption) {
        var repair = this.repair;
        var maxHour = repair.maxHour;
        maxHour = Math.ceil(maxHour / 5) * 5;
        _.set(chartOption, 'yAxis[0].max', maxHour);

        var fields = ['name'];
        fields.pushArray(RepairTimeInfo.dimensionsField);
        var source = [fields];
        var chartData = repair.getChartData();
        source.pushArray(chartData);
        _.set(chartOption, 'dataset.source', source);

        var series = [];
        for (var i = 0; i < chartData.length; i++) {
          series.push({
            type: 'line',
            seriesLayoutBy: 'row'
          });
        }
        _.set(chartOption, 'series', series);
      }
    },

    template: template
  };
}();
